<template>
    <div>
        <div style="width: 100%;">
            <div style="font-weight: 700;font-size: 20px;display: flex">
                <div>|{{title}}</div>
                <el-upload
                        style="margin-left: 30px"
                        class="upload-demo"
                        ref="upload"
                        name="multipartfiles"
                        :action="action"
                        :show-file-list="false"
                        :multiple="true"
                        :on-change="handleChangeFile"
                        :auto-upload="false">
                    <el-button v-if="buttonActive" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button v-if="buttonActive" style="margin-left: 10px;" size="small" type="success"
                               @click="submitUpload">上传到服务器
                    </el-button>
                    <el-button v-if="buttonActive" style="margin-left: 10px;" size="small" type="warning"
                               @click="resetUpload">重置
                    </el-button>
                </el-upload>
            </div>
            <div v-show="progressFlag" class="head-img">
                <el-progress :text-inside="true" :stroke-width="10" :percentage="progressPercent" status="success"></el-progress>
            </div>
        </div>
        <el-divider></el-divider>
        <el-table :data="fileList">
            <el-table-column label="文件名称" prop="fileName"></el-table-column>
            <el-table-column label="上传人" prop="uploadPerson"></el-table-column>
            <el-table-column label="上传时间" prop="uploadDate"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <a style="color: green" @click.stop="handleDownload(scope.row,...arguments)" href="#">下载</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {DateUtil} from "../../../model/common/DateUtil";

    export default {
        props: ['title', 'showButton', 'parentFileList', 'action', 'params' ,'headers'],
        data() {
            return {
                progressFlag: false,
                progressPercent: 10,
                fileList: [],
                buttonActive: ''
            }
        },
        methods: {
            handleChangeFile(file, fileList) {
                this.fileList = []
                fileList.forEach(item => {
                    this.fileList.push({
                        fileName: item.name,
                        uploadPerson: sessionStorage.getItem('realName'),
                        uploadDate: DateUtil.today(),
                        file: item.raw
                    })
                })
            },
            resetUpload() {
                this.$refs.upload.clearFiles()
                this.fileList = []
            },
            submitUpload() {
                if (this.fileList.length == 0) {
                    this.$message.warning({
                        message: '请至少上传一个文件',
                        duration: 1000
                    })
                    return
                }
                const form = new FormData()

                const body = {}
                if (this.params != null && this.params != undefined) {
                    Object.keys(this.params).forEach(key => body[key] = this.params[key])
                }
                const headers = {}
                if (this.headers != null && this.headers != undefined) {
                    Object.keys(this.headers).forEach(key => headers[key] = this.headers[key])
                }

                this.fileList.forEach(item => {
                    form.append('file', item.file, item.fileName)
                })
                form.append('body', JSON.stringify(body))
                this.progressFlag = true
                this.$axios.post(this.action, form, {
                    headers,
                    onUploadProgress: progressEvent => {
                        // progressEvent.loaded:已上传文件大小
                        // progressEvent.total:被上传文件的总大小
                        // 进度条
                        this.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0) | 0
                    }
                }).then(response => {
                    this.$emit('uploadSuccess',response.data.message,response.data.files)
                    for (let i = 0; i < response.data.files.length; i++) {
                        this.fileList[i].filePath = response.data.files[i].filePath
                    }

                    this.$message({
                        message: '上传成功！',
                        type: 'success',
                        duration: '2000'
                    })
                    this.progressFlag = false
                    this.progressPercent = 0
                })
            },
            handleDownload(row, array) {
                const a = array.target
                if (row.filePath == '' || row.filePath == null) {
                    this.$message.warning({
                        message: '请先上传文件',
                        duration: 1000
                    })
                    this.$router.push({
                        path: this.$route.path
                    })
                } else {
                    a.href = 'http://localhost/download?token=' + this.headers.token + '&url=' + row.filePath + '&name=' + row.fileName.split(/\./)[0]
                }
            },
            handleSetParentList(){
                if (this.parentFileList != null && this.parentFileList != undefined && this.parentFileList.length != 0) {
                    this.parentFileList.forEach(file => this.fileList.push(file))
                }
            }
        },
        created() {
            if (this.showButton == null || this.showButton == undefined) {
                this.buttonActive = true
            } else {
                this.buttonActive = this.showButton
            }

            this.handleSetParentList()
        },
        watch:{
            parentFileList:{
                handler(){
                    this.handleSetParentList()
                },deep:true
            }
        }
    }
</script>

<style scoped>

</style>
